<template>
	<view>
		<!-- 图片橱窗 -->
		<view class="diy-window"
			:style="{background: itemStyle.background, padding:  itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px'}">
			<!-- matrix -->
			<view :class="['data-list','avg-sm-' + itemStyle.layout]" v-if="itemStyle.layout > -1">
				<view :style="{padding:itemStyle.paddingTop + 'px ' +  itemStyle.paddingLeft + 'px'}"
					v-for="(dataItem,index) in dataList" :key='index' class="data-item">
					<view class="item-image" @click="navigationTo" :data-url="dataItem.linkUrl">
						<image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
					</view>
				</view>
			</view>
			<!-- display -->
			<view v-else class="display">
				<view class="display-left"
					:style="{padding: itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px'}">
					<image class="image" @click="navigationTo" :data-url="dataList[0].linkUrl"
						:src="dataList[0].imgUrl"></image>
				</view>
				<view class="display-right">
					<view v-if="dataList.length >= 2 " class="display-right1"
						:style="{padding:  itemStyle.paddingTop +'px ' + itemStyle.paddingLeft +'px'}">
						<image class="image" @click="navigationTo" :data-url="dataList[1].linkUrl"
							:src="dataList[1].imgUrl"></image>
					</view>
					<view class="display-right2">
						<view v-if="dataList.length >= 3" class="left"
							:style="{padding:  itemStyle.paddingTop +'px ' + itemStyle.paddingLeft +'px'}">
							<image class="image" @click="navigationTo" :data-url="dataList[2].linkUrl "
								:src="dataList[2].imgUrl "></image>
						</view>
						<view v-if=" dataList.length >= 4 " class="right"
							:style="{padding:  itemStyle.paddingTop +'px ' + itemStyle.paddingLeft +'px'}">
							<image class="image" @click="navigationTo" :data-url="dataList[3].linkUrl"
								:src="dataList[3].imgUrl"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array
		},
		data() {
			return {

			};
		},
		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(e) {

			},
		}
	}
</script>

<style scoped>
	/* common.wxss */

	/* @import "/utils/common.wxss"; */

	/* 图片橱窗 */

	.diy-window .data-list::after {
		clear: both;
		content: " ";
		display: table;
	}

	.diy-window .data-list .data-item {
		float: left;
		box-sizing: border-box;
	}

	.diy-window .data-list .image {
		display: block;
		width: 100%;
	}

	/* 分列布局 */

	.diy-window .avg-sm-2>.data-item {
		width: 50%;
	}

	.diy-window .avg-sm-3>.data-item {
		width: 33.33333333%;
	}

	.diy-window .avg-sm-4>.data-item {
		width: 25%;
	}

	.diy-window .avg-sm-5>.data-item {
		width: 20%;
	}

	/* 橱窗样式 */

	.diy-window {
		box-sizing: border-box;
	}

	.diy-window .display {
		height: 0;
		width: 100%;
		margin: 0;
		padding-bottom: 50%;
		position: relative;
		box-sizing: border-box;
	}

	.diy-window .display .image {
		width: 100%;
		height: 100%;
	}

	.diy-window .display .display-left {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.diy-window .display .display-right {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		box-sizing: border-box;
	}

	.diy-window .display .display-right1 {
		width: 100%;
		height: 50%;
		position: absolute;
		top: 0;
		box-sizing: border-box;
		left: 0;
	}

	.diy-window .display .display-right2 {
		width: 100%;
		height: 50%;
		position: absolute;
		top: 50%;
		left: 0;
		box-sizing: border-box;
	}

	.diy-window .display .display-right2 .left {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.diy-window .display .display-right2 .right {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		box-sizing: border-box;
	}
</style>
